<template>
	<div class="app-container">

		<section>
			<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true" :model="historyTop">
					<el-form-item label="采购单号:">
						<el-input v-model="historyTop.OrderVoucher" placeholder="采购单号"></el-input>
					</el-form-item>
					<el-form-item label="收货状态:">
						<el-select v-model="Status" placeholder="请选择收货状态" @change="selectStatus" filterable>
							<el-option v-for="item in historyTop.Status" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-button type="primary" v-on:click="getWarehouseReceiptHistoryList">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<el-table :data="historylist" v-loading="listLoading" border style="width: 100%; margin-top: 20px">
				<el-table-column prop="OrderVoucher" label="采购单号" sortable align="center">
				</el-table-column>
				<el-table-column prop="Ins" label="收货日期" sortable align="center" :formatter="formatDate">
				</el-table-column>
				<el-table-column prop="Consignee" label="收货人（仓管员）" width="150" align="center">
				</el-table-column>
				<!--<el-table-column prop="SupplierId" sortable label="供货商ID" align="center">
				</el-table-column>-->
				<el-table-column prop="SupplierName" label="供货商名称" align="center">
				</el-table-column>
				<el-table-column prop="Status" label="物流状态" align="center">
					<template slot-scope="scope">
						<div>
							<span v-if="scope.row.Status==1">已收货</span>
							<span v-if="scope.row.Status==2">未收货</span>
							<span v-if="scope.row.Status==3">拒收</span>
							<span v-if="scope.row.Status==4">部分收货</span>
							<span v-if="scope.row.Status==5">超额到货</span>

						</div>
					</template>
				</el-table-column>
				<el-table-column label="商品" width="200" align="center">
					<template slot-scope="scope">
						<!--	<el-button type="primary" v-if="scope.row.OutDate == ''" @click="handleAdd">出库</el-button>-->
						<el-button type="primary" @click="handleLook(scope.row.WarehouseConsignId)">查看</el-button>
						<!--	@click="handleEdit(scope.$index, scope.row)"-->
					</template>
				</el-table-column>
			</el-table>
			<!--商品查看列表-->
			<el-dialog :visible.sync="lookFormVisible" width="73%" :before-close="handleClose">
				<el-table :data="lookskulist" v-loading="listLoading" border style="width: 100%; margin-top: 20px" show-summary :summary-method="getSummaries">
					<el-table-column prop="SKUName" label="商品名称" align="center">
					</el-table-column>
					<el-table-column prop="SKUUnitNo" label="当前单位" align="center">
					</el-table-column>
					<el-table-column prop="UnitPrice" label="实价" sortable align="center">
					</el-table-column>
					<el-table-column prop="TotalPrice" label="总价" sortable align="center">
					</el-table-column>
					<el-table-column prop="ConsignAmount" sortable label="收货数量" align="center">
					</el-table-column>
					<el-table-column prop="TaxRate" sortable label="税率" align="center">
					</el-table-column>
					<el-table-column prop="Description" sortable label="备注" align="center">
					</el-table-column>
				</el-table>
			</el-dialog>
			<el-pagination background layout=" prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right ;margin-top: 10px;">
			</el-pagination>

		</section>

	</div>
</template>

<script>
	import { WarehouseReceiptHistoryList } from '@/api/api'
	import Config from "../../api/config";
	export default {
		data() {
			return {
				listLoading: false,
				Status: 0,
				lookskulist: [],
				historyTop: {
					OrderVoucher: "",
					WarehouseConsignId: '',
					Status: [{
							value: 0,
							label: "全部"
						},
						{
							value: 1,
							label: "已收货"
						},
						{
							value: 2,
							label: "未收货"
						},
						{
							value: 3,
							label: "拒收"
						},
						{
							value: 4,
							label: "部分收货"
						},
						{
							value: 5,
							label: "超额到货"
						},
					],
				},
				historylist: [],
				lookLoading: false,
				lookFormVisible: false,
				list: [],
				page: 1,
				pageSize: 20,
				total: 10000000000,
				addForm: {},
				skulist: [],
			};
		},
		created() {
			this.getWarehouseReceiptHistoryList();
		},
		methods: {
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
//					console.log(column)
//					console.log(index)
					if(index === 0) {
						sums[index] = '总价';
						return;
					}
					if( index === 2||index === 4||index === 5||index === 6 ) {
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if(!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if(!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += '元';
					}
				});

				return sums;
			},
			formatDate: function(row) {
				var date = new Date(row.Ins);
				var yy = date.getFullYear();
				if(yy < 1900) yy = yy + 1900;
				var MM = date.getMonth() + 1;
				if(MM < 10) MM = '0' + MM;
				var dd = date.getDate();
				if(dd < 10) dd = '0' + dd;
				var hh = date.getHours();
				if(hh < 10) hh = '0' + hh;
				var mm = date.getMinutes();
				if(mm < 10) mm = '0' + mm;
				var ss = date.getSeconds();
				if(ss < 10) ss = '0' + ss;
				return yy + "年" + MM + "月" + dd + "日" + " " + hh + ":" + mm + ":" + ss;
			},
			selectStatus(val) {
				this.Status = val;
				this.getWarehouseReceiptHistoryList();
			},
			//获取历史列表
			getWarehouseReceiptHistoryList() {
				var self = this;
				console.log(self)
				var para = {
					Page: this.page,
					PageSize: this.pageSize,
					OrderVoucher: this.historyTop.OrderVoucher,
					WarehouseConsignId: this.historyTop.WarehouseConsignId,
					Status: this.Status
				};
				this.listLoading = true;
				console.log(para);
				WarehouseReceiptHistoryList(para).then((res) => {

					if(res.data.Status != 1) {
						this.$message({
							message: res.data.Description,
							type: 'error'
						});
						return;
					} else {
						var vdata = JSON.parse(Base64.decode(res.data.Data));
						console.log(vdata);
						self.historylist = vdata.DataList;
						self.lookskulist = vdata.DataList;
						self.total = vdata.TotalCount;
					}
					self.listLoading = false;
				});
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getWarehouseReceiptHistoryList();
			},
			//关闭查看页面
			handleClose(done) {
				this.Status = 0;
				this.historyTop.WarehouseConsignId = '';
				this.lookFormVisible = false;
				this.getWarehouseReceiptHistoryList();
			},
			//显示商品界面
			handleLook(WarehouseConsignId) {
				this.historyTop.OrderVoucher = '';
				this.Status = '';
				this.historyTop.WarehouseConsignId = WarehouseConsignId;
				this.getWarehouseReceiptHistoryList();
				this.lookFormVisible = true;

			},
		},
	};
</script>

<style>

</style>